<template>
	<view class="l_pages" :style="skin">
		<jnavbar title="分销团队"></jnavbar>
		<view class="page_container">
			<view class="uni-block-bar uni-view uni-flex-row uni-underline">
				<view :class="[tabIndex == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="1" @click="tapTab"><text>一级分销</text></view>
				<view v-if="agentExplain.level>1" :class="[tabIndex == 2 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="2" @click="tapTab"><text>二级分销</text></view>
				<view v-if="agentExplain.level>2" :class="[tabIndex == 3 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="3" @click="tapTab"><text>三级分销</text></view>
				<view :class="[tabIndex == 0 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="0" @click="tapTab"><text>下级</text></view>
			</view>
			<scroll-view scroll-y class="scroll_div" @scrolltolower='getlist'>
				<view class="uni-block-list">
					<view class="empty_div" v-if="hasShow == 'none'"><u-empty  text="暂无数据" mode="list"></u-empty></view>
					<view class="list uni-flex-column" v-else-if="hasShow == 'list'">
						<view class="item uni-flex-row uni-view uni-flex-title" v-for="(item, index) in list" :key="index" @click="goDetail(order)">
							<image :src="item.picurl"></image>
							<view style="flex: 3;" class="uni-flex-column">
								<text class="u-main-color">用户：{{ item.nickname }}</text>
								<text v-if="tabIndex == 1 || tabIndex == 2">下级：{{ item.child_agent }}</text>
								<text class="u-font-13">注册时间：{{ item.create_time }}</text>
							</view>
							<text style="flex: 1;text-align: right;">{{ item.agent_total }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import http from '@/common/http.js';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			tabIndex: 1,
			hasShow: 'list',
			page: 1,
			size: 10,
			list: [],
			sum: 0,
			time: 0,
			agentExplain:{
				
			}
		};
	},
	computed:{
		skin(){
			return this.$store.state.skin;
		},
	
	},
	async onLoad(params) {
		await this.$getWx
		if (params.tab) {
			this.tabIndex = params.tab;
		}
		this.getagentList();
		this.getjuris('agentExplain').then(res=>{
			this.agentExplain=res
		})
	},
	onShow() {
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getagentList(this.tabIndex);
	},

	methods: {
		getlist(){
			this.getagentList(this.tabIndex);
		},
		logincallback(e) {
			if (e.islogin) {
				this.getagentList();
			}
		},
		tapTab(e) {
			this.tabIndex = e.currentTarget.dataset.id;
			this.page = 1;
			this.list = [];
			this.getagentList(this.tabIndex);
		},
		getagentList(status) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const _this = this;
			const param = {
				level: this.tabIndex
			};
			http('/agent/list?page=' + this.page + '&size=10', param, 'POST').then(
				res => {
					const json = res.data.msg;
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (json.data.length > 0) {
						_this.hasShow = 'list';
						_this.list = _this.list.concat(json.data);
						_this.page++;
					} else {
						if (this.page == 1) {
							_this.hasShow = 'none';
						} else {
							uni.showToast({
								title: '没有更多数据了',
								icon: 'none'
							});
						}
					}
				},
				e => {
					uni.showModal({
						title: '提示',
						content: e,
						showCancel: false
					});
					uni.hideLoading();
				}
			);
		},
		goDetail(obj) {
			//关闭订单
			if (obj.status == 9) {
				return;
			}
			this.Jumpurl({
				link:'orderdetail?type=3&id=' + obj.id,
				type:1,
				login_type:1
				
			})
		}
	}
};
</script>

<style lang="scss">
.page_container {
	position: relative;
	.scroll_div {
		height: calc(100% - 80rpx);
	}
}
.uni-block-bar {
	justify-content: space-between;
	height: 80rpx;
	z-index: 100;
	width: 750rpx;
	.item {
		line-height: 78rpx;
		flex: 1;
		color: #696969;

		text {
			display: inline-block;
		}
	}

	.active {
		color: var(--main-color);
		border-bottom: 2rpx solid var(--main-color);
	}
}

.uni-block-list {
	.list {
		.item {
			width: 710rpx;
			margin-left: 20rpx;
			padding: 20rpx 20rpx;
			border-radius: 12rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.head {
				padding: 0 0 20rpx 0;
			}

			.body {
				padding: 20rpx 0;

				image {
					width: 130rpx;
					height: 130rpx;
					margin-right: 36rpx;
					border-radius: 6rpx;
				}

				.detail {
					flex: 1;
					justify-content: space-between;
					height: 130rpx;
					.title {
						line-height: 1;
						justify-content: space-between;
						font-size: 36rpx;
						.name {
							box-sizing: border-box;
							text-overflow: ellipsis;
							overflow: hidden;
							display: inline-block;
							width: 440rpx;
							white-space: nowrap;
						}
					}
					.skuvalue {
						color: #333;
					}
					.price {
						text:first-child {
							color: #ff3c29;
						}
					}
				}
			}

			.bottom {
				padding: 10rpx 0;
				// border-top: 1rpx solid #e7e7e7;

				.left {
					width: 100%;
					justify-content: flex-end;
					.price {
						font-weight: bold;
						margin-right: 16rpx;
					}
				}

				.right {
					width: 100%;
					justify-content: flex-end;

					.number {
						font-weight: bold;
					}

					.price {
						font-weight: bold;
					}
				}
			}

			.button {
				justify-content: flex-end;

				text {
					display: inline-block;
					text-align: center;
					font-size: 24rpx;
					line-height: 50rpx;
					// padding: 12rpx 0;

					width: 150rpx;

					border-radius: 30rpx;
					height: 50rpx;
				}

				/*cancel：取消*/
				.pay {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.finish {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.success {
					color: #ffffff;
					margin-left: 20rpx;
				}

				.cancel {
					border: 1px solid #878787;
				}

				.refund {
					border: 1px solid #878787;
				}

				.del {
					border: 1px solid #878787;
				}

				.state {
					color: #b00606;
					width: 210rpx;
					text-align: right;
				}
			}
		}
	}
}
</style>
